<template>
  <div
    class="empty"
    v-if="show"
  >
    <div class="square-block">
      <div class="square-block-dummy"></div>
      <div class="square-block-box">
        <img v-lazy="icon">
      </div>
    </div>
    <div class="empty-content">
      <h2 class="empty-content__title">{{ title }}</h2>
      <h3
        class="empty-content__subtitle"
        v-if="subtitle"
      >{{ subtitle }}</h3>
      <p class="empty-content__message">{{ message }}</p>
    </div>

    <div class="empty-button">
      <slot name="button">
        <van-button
          v-if="button"
          @click="onClick"
          :type="button.type?button.type:'warning'"
          round
        >{{ button.text }}</van-button>
      </slot>
    </div>
  </div>
</template>
<script>
import { Button } from 'vant'
export default {
  components: {
    [Button.name]: Button
  },
  name: 'blank',
  props: {
    value: {
      type: Boolean,
      default: true
    },
    icon: {
      type: String,
      default: '/static/icons/blank.png'
    },
    title: {
      type: String,
      default: '暂无内容'
    },
    subtitle: {
      type: String
    },
    button: {
      type: Object,
      default: null
    },
    message: {
      type: String,
      default: ''
    }
  },
  computed: {
    show () {
      return this.value
    }
  },
  methods: {
    onClick () {
      this.$emit('click', this.button)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.square-block {
  margin: 15% auto 0;
  border: 1px solid transparent;
  width: 40%;
  position: relative;

  &-dummy {
    margin-top: 100%;
  }

  &-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -moz-box-align: center;
    -moz-box-pack: justify;
    align-items: center;
    align-content: space-around;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    flex-wrap: nowrap;

    img {
      width: 100%;
      height: auto;
    }
  }

  &-dot {
    position: absolute;
    right: -8px;
    bottom: 8px;
    width: 8px;
    height: 16px;
    background: #0193cc;
  }
}

.empty {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  background: #f8f8f8;

  &-content {
    padding: 15px;
    text-align: center;
    font-weight: normal;
    &__title {
      font-size: 16px;
    }
    &__subtitle {
      font-size: 12px;
      color: #ccc;
      text-transform: uppercase;
      font-weight: 300;
      margin: 0;
    }
    &__message {
      padding: 5px 15px;
      color: #aaa;
      font-size: 12px;
      font-weight: 300;
      margin-top: 10px;
    }
  }

  &-button {
    padding: 10px 0;
    text-align: center;
    margin-top: 20px;
    .van-button {
      padding: 0 20px;
      height: 38px;
      line-height: 38px;
    }
  }
}
</style>
